<template>
	<view class="contant">
		<!-- 按钮部分 -->
		<u-picker :show="show" ref="uPicker" :columns="columns" @confirm="confirm" @change="changeHandler"></u-picker>
		<u-button @click="showPicker" shape="square" size="normal" type="primary" style="margin: 20rpx">选择学院 {{acaName}}</u-button>
		<view class="summary">
			<u-button size="mini" :custom-style="customStyle" :disabled="downLoadBtn" type="warning" style="width: 200rpx;">检查统计</u-button>
			<u-button size="mini" :custom-style="customStyle" :disabled="downLoadBtn" type="warning" style="width: 200rpx;">点击下载详情</u-button>
		</view>
		<!-- 表格部分 -->
		<!-- 问题区域 -->
		<view class="uni-container">
			<uni-table ref="table" :loading="loading" border stripe  emptyText="暂无更多数据" @selection-change="selectionChange">
				<uni-tr>
					<uni-th width="130" align="center">问题区域</uni-th>
					<uni-th width="120" align="center">状态</uni-th>
					<uni-th align="center">检查时间</uni-th>
				</uni-tr>
				<uni-tr v-for="(item, index) in tableData" :key="index">
					<uni-td align="center">{{ item.area }}</uni-td>
					<uni-td align="center">
						<view class="name">{{ item.status }}</view>
					</uni-td>
					<uni-td align="center">{{ item.date }}</uni-td>
				</uni-tr>
			</uni-table>
			<view class="uni-pagination-box"><uni-pagination show-icon :page-size="pageSize" :current="pageCurrent" :total="total" @change="change" /></view>
		</view>
		<!-- 优秀区域 -->
		<view class="uni-container youxiu">
			<uni-table ref="table" :loading="loading" border stripe  emptyText="暂无更多数据" @selection-change="selectionChange">
				<uni-tr>
					<uni-th width="190" align="center">优秀区域</uni-th>
					<uni-th align="center">检查时间</uni-th>
				</uni-tr>
				<uni-tr v-for="(item, index) in youxiuData" :key="index">
					<uni-td align="center">{{ item.area }}</uni-td>
					<uni-td align="center">{{ item.date }}</uni-td>
				</uni-tr>
			</uni-table>
			<view class="uni-pagination-box"><uni-pagination show-icon :page-size="pageSize" :current="pageCurrent" :total="total" @change="change" /></view>
		</view>
	</view>
</template>

<script>
import tableData from './tableData.js'
export default {
	data() {
		return {
			downLoadBtn: true,//下载按钮
			customStyle: {
				display:"inline-block",
				marginLeft:"130rpx"
			},
			searchVal: '',
			tableData: [],//问题区域数据
			// 每页数据量
			pageSize: 20,
			// 当前页
			pageCurrent: 1,
			// 数据总量
			total: 0,
			loading: false,
			columns:[
				['电信学院','外国语学院','建筑学院','数理学院']
			],
			show:false,//是否展示弹出层
			acaName: '',//已选中的学院名称
			youxiuData:[//优秀区域数据
				{
					"area": "10栋，10B208",
					"date":"2021-12-08"
				},{
					"area": "10栋，10B208",
					"date":"2021-12-08"
				},{
					"area": "10栋，10B208",
					"date":"2021-12-08"
				},{
					"area": "10栋，10B208",
					"date":"2021-12-08"
				},{
					"area": "10栋，10B208",
					"date":"2021-12-08"
				},{
					"area": "10栋，10B208",
					"date":"2021-12-08"
				},{
					"area": "10栋，10B208",
					"date":"2021-12-08"
				}
			]
		}
	},
	onLoad() {
		this.selectedIndexs = []
		this.getData(1)
	},
	methods: {
		 changeHandler(e) {
		                const {
		                    columnIndex,
		                    value,
		                    values, // values为当前变化列的数组内容
		                    index,
							// 微信小程序无法将picker实例传出来，只能通过ref操作
		                    picker = this.$refs.uPicker
		                } = e
		                // 当第一列值发生变化时，变化第二列(后一列)对应的选项
		                if (columnIndex === 0) {
		                    // picker为选择器this实例，变化第二列对应的选项
		                    picker.setColumnValues(1, this.columnData[index])
		                }
		            },
					// 回调参数为包含columnIndex、value、values
					confirm(e) {
		                console.log('confirm', e)
						// console.log(e.value[0])
						this.acaName = e.value[0]
		                this.show = false
					},
					showPicker(){
						this.show = true
					},
		// 多选处理
		selectedItems() {
			return this.selectedIndexs.map(i => this.tableData[i])
		},
		// 多选
		selectionChange(e) {
			console.log(e.detail.index)
			this.selectedIndexs = e.detail.index
		},
		//批量删除
		delTable() {
			console.log(this.selectedItems())
		},
		// 分页触发
		change(e) {
			this.$refs.table.clearSelection()
			this.selectedIndexs.length = 0
			this.getData(e.current)
		},
		// 搜索
		search() {
			this.getData(1, this.searchVal)
		},
		// 获取数据
		getData(pageCurrent, value = '') {
			this.loading = true
			this.pageCurrent = pageCurrent
			this.request({
				pageSize: this.pageSize,
				pageCurrent: pageCurrent,
				value: value,
				success: res => {
					// console.log('data', res);
					this.tableData = res.data
					this.total = res.total
					this.loading = false
				}
			})
		},
		// 伪request请求
		request(options) {
			const { pageSize, pageCurrent, success, value } = options
			let total = tableData.length
			let data = tableData.filter((item, index) => {
				const idx = index - (pageCurrent - 1) * pageSize
				return idx < pageSize && idx >= 0
			})
			if (value) {
				data = []
				tableData.forEach(item => {
					if (item.name.indexOf(value) !== -1) {
						data.push(item)
					}
				})
				total = data.length
			}

			setTimeout(() => {
				typeof success === 'function' &&
					success({
						data: data,
						total: total
					})
			}, 500)
		}
	}
}
</script>

<style>
	.contant{
		font-family: 'KaiTi','Times New Roman', Times, serif;
	}
/* #ifndef H5 */
/* page {
	padding-top: 85px;
} */
/* #endif */
.uni-group {
	display: flex;
	align-items: center;
}
.uni-table-th[data-v-511e81f9] {
    padding: 12px 10px;
    display: table-cell;
    box-sizing: border-box;
    font-size: 16px;
    font-weight: bold;
    color: #909399;
    border-bottom: 1px #ebeef5 solid;
}
.uni-table-td[data-v-321f8e79] {
    display: table-cell;
    padding: 8px 10px;
    font-size: 16px;
    border-bottom: 1px #EBEEF5 solid;
    font-weight: 400;
    color: #606266;
    line-height: 23px;
    box-sizing: border-box;
}
/* 优秀区域 */
.youxiu{
	margin-top: 15rpx;
}
.summary{
	display: flex;
	flex-direction: row;
	justify-content: space-around;
}
.uni-container{
	margin-top: 20rpx;
}
</style>
